<template>
  <div class="items">
    <headInput></headInput>
    <van-row>
      <van-col span="6">
        <van-sidebar v-model="activeKey" class="left-list">
          <van-sidebar-item
            v-for="item in datalList.categoryList"
            :key="item.id"
            :title="item.name"
            class="categoryList"
            @click="changePic(item)"
          />
        </van-sidebar>
      </van-col>
      <van-col span="18">
        <van-grid :border="false" :column-num="1" class="shegnqi">
          <van-grid-item>
            <van-image :src="src" />
          </van-grid-item>
          <div class="van-ellipsis msg">{{ msg }}</div>
        </van-grid>
        <van-grid :column-num="3" square>
          <van-grid-item v-for="item in currentSubCategory" :key="item.id">
            <img :src="item.picUrl" alt="" class="list-img"  @click="btn(item)"/>
            <span class="list-msg"> {{ item.name }}</span>
          </van-grid-item>
        </van-grid>
      </van-col>
    </van-row>
    <router-view/>
  </div>
</template>
<script>
import { getItems, getItemsId } from '@/api/handpick'
import headInput from '@/components/headinput.vue'
// import axios from 'axios'
// import beas from '@/views/Address-the-set/url.js'
export default {
  name: 'ItemsVue',
  data () {
    return {
      activeKey: 0,
      datalList: {
        categoryList: [],
        currentCategory: [],
        currentSubCategory: []
      },
      value: '',
      src: '',
      msg: '',
      id: '',
      currentSubCategory: []
    }
  },
  components: {
    headInput
  },
  mounted () {
    this.getData()
  },
  methods: {
    btn (item) {
      this.$router.push({ name: 'Category', query: { keyword: '', itemClass: item.id } })
      this.$store.commit('addData', this.currentSubCategory)
      this.$store.commit('addId', item.id)
    },
    getData () {
      getItems().then((res) => {
        const data = res.data
        for (const key in data) {
          this.datalList[key] = data[key]
        }
        this.src = this.datalList.categoryList[0].picUrl
        this.msg = this.datalList.categoryList[0].desc
        this.currentSubCategory = this.datalList.currentSubCategory
      })
        .catch((err) => {
          console.log(err)
        })
    },
    changePic (item) {
      this.src = item.picUrl
      this.msg = item.desc
      this.id = item.id
      getItemsId(item.id)
        .then((res) => {
          // console.log(res.data)
          const data = res.data
          this.currentSubCategory = data.currentSubCategory
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
// .items {
//   margin-bottom: 50px;
// }
.categoryList {
  padding: 0.32rem 0.32rem;
}
.left-list {
  text-align: center;
}
.msg {
  width: 100%;
  font-size: 0.35rem;
  text-align: center;
  margin: .2rem;
}
.list-headr-image {
  padding: 0;
}
.list-img {
  width: 70px;
  height: 70px;
}
.list-msg {
  font-size: 0.3rem;
}
.shegnqi:first-child ::v-deep .van-grid-item__content {
  padding: 0 16px;
  width: 280px;
}
</style>
